<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="日期类型：">
              <el-select v-model="form.timeTypeValue" placeholder="请选择" @change="changeTimeType">
                <el-option
                  v-for="item in form.timeTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="车牌号：">
              <el-select v-model="zhfy.cph" placeholder="请选择">
                <el-option
                  v-for="item in zhfy.cphList"
                  :key="item.index"
                  :label="item.LicensePlate"
                  :value="item.LicensePlate"
                ></el-option>
              </el-select>
            </el-form-item>-->
          </el-form>
        </el-col>
        <el-col :span="6" v-if="form.timeTypeValue != '0'">
          <el-form ref="form" :model="form">
            <el-form-item :label="form.TITLETIME">
              <el-select v-model="form.timeValue" placeholder>
                <el-option
                  v-for="(item,index) in form.timeList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" v-if="form.timeTypeValue === '0'">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：" :label-width="labelwidth">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" v-if="form.timeTypeValue === '0'">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：" :label-width="labelwidth">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float:left">
            <el-button size="mini" type="primary" @click="getlistdata">查 询</el-button>
            <el-button size="mini" type="success" @click="exportExcel">导 出</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table :data="zhfy.tableData" style="width: 100%" border highlight-current-row height="477">
      <el-table-column
        v-for="(item,index) in zhfy.tableHead"
        :key="index"
        :label="item.label"
        :property="item.property"
        align="center"
      >
        <template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'

import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      //单一车辆费用统计
      zhfy: {
        show: false,//是否显示
        cphList: [],//车牌号列表
        cph: '',//车牌号
        startDate: '',//开始日期
        endDate: '',//结束日期
        year: '',//年
        month: '',//月
        season: '',//季
        tableData: [],//列表数据
        tHeader: [],
        filterVal: [],
        excelName: []//导出excel名称
      },
      //单一车辆费用统计查询
      zhfySearch: {
        carNo: '',
        StartDate: '',
        endDate: '',
        season: '',
        month: '',
        year: '',
        type: ''
      },
      form: {
        carList: [],
        carValue: '',
        timeTypeList: [/*{ label: '自定义', value: '0' },*/ { label: '年', value: '1' }, { label: '季度', value: '2' }, { label: '月', value: '3' }],
        timeTypeValue: '3',
        TITLETIME: '月份：',
        timeList: [],
        timeValue: '',
        startDate: '',
        endDate: '',
        yearList: ['2018年', '2019年', '2020年', '2021年'],
        seasonList: ['第一季度', '第二季度', '第三季度', '第四季度'],
        monthList: ['1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'],
        radioData: '日',
        valueDay: '',
        valueMonth: '',

      },
      zhfySearch: {},
      tableHead: [],
      tableData: []
    }
  },
  created () {

    this.form.timeList = this.form.monthList
  },
  mounted () {
    this.getLisencePlateList()
  },
  methods: {
    //获取车牌列表
    async getLisencePlateList () {
      var url = '/DataListCompany/GetLisencePlateApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.zhfy.cphList = data
    },
    changeTimeType () {
      switch (this.form.timeTypeValue) {
        case '1':
          this.form.timeList = this.form.yearList
          this.form.TITLETIME = '年份：'
          break;
        case '2':
          this.form.timeList = this.form.seasonList
          this.form.TITLETIME = '季度：'
          break;
        case '3':
          this.form.timeList = this.form.monthList
          this.form.TITLETIME = '月份：'
          break;
        default:
          break;
      }
      this.form.timeValue = ''
    },
    async getlistdata () {
      var yearStr = new Date().getFullYear().toString()
      if (this.form.timeTypeValue === '1') {
      this.sjccSearch = {
          carNo: '',
          season: '',
          month: '',
          year: this.form.timeValue,
          type: '年',
          clientNo: localStorage.getItem('CLIENT_NO')
        }
        this.sjcc.tableHead = [
          {
            label: '时间',
            property: '时间'
          }, {
            label: '驾驶员',
            property: '驾驶员'
          }, {
            label: '用车次数',
            property: '用车次数'
          }, {
            label: '行驶里程',
            property: '行驶里程'
          }, {
            label: '行驶时间',
            property: '行驶时间'
          }
        ]
        this.sjcc.excelName = '司机出车统计'
        this.sjcc.tHeader = ['时间', '驾驶员', '用车次数', '行驶里程', '行驶时间']
        this.sjcc.filterVal = ['时间', '驾驶员', '用车次数', '行驶里程', '行驶时间']
      }
      if (this.form.timeTypeValue === '2') {
        this.sjccSearch = {
          carNo: '',
          season: this.form.timeValue,
          month: '',
          year: yearStr,
          type: '季度',
          clientNo: localStorage.getItem('CLIENT_NO')
        }
        this.sjcc.tableHead = [
          {
            label: '时间',
            property: '时间'
          }, {
            label: '季度',
            property: '季度'
          },
          {
            label: '驾驶员',
            property: '驾驶员'
          }, {
            label: '用车次数',
            property: '用车次数'
          }, {
            label: '行驶里程',
            property: '行驶里程'
          }, {
            label: '行驶时间',
            property: '行驶时间'
          }
        ]
        this.sjcc.excelName = '司机出车统计'
        this.sjcc.tHeader = ['时间', '季度', '驾驶员', '用车次数', '行驶里程', '行驶时间']
        this.sjcc.filterVal = ['时间', '季度', '驾驶员', '用车次数', '行驶里程', '行驶时间']
      }
      if (this.form.timeTypeValue === '3') {
        this.sjccSearch = {
          carNo: '',
          season: '',
          month: this.form.timeValue,
          year: yearStr,
          type: '月',
          clientNo: localStorage.getItem('CLIENT_NO')
        }
        this.sjcc.tableHead = [
          {
            label: '时间',
            property: '时间'
          }, {
            label: '月份',
            property: '月份'
          }, {
            label: '驾驶员',
            property: '驾驶员'
          },
          {
            label: '用车次数',
            property: '用车次数'
          }, {
            label: '行驶里程',
            property: '行驶里程'
          }, {
            label: '行驶时间',
            property: '行驶时间'
          }
        ]
        this.sjcc.excelName = '司机出车统计'
        this.sjcc.tHeader = ['时间', '月份', '驾驶员', '用车次数', '行驶里程', '行驶时间']
        this.sjcc.filterVal = ['时间', '月份', '驾驶员', '用车次数', '行驶里程', '行驶时间']
      }
      let { data } = await this.$Http.get('/DataListCompany/GetsjccApi', { params: this.sjccSearch })
      // let { data } = await this.$Http.get(`/DataListCompany/GetLisencePlateApi?ClientNo=${this.$route.query.ClientNo}`)
      // debugger
      // 原始数据
      this.sjcc.tableData = data
    },
    // 导出Excel
    exportExcel () {
      export2Excel(this.sjcc.tHeader, this.sjcc.filterVal, this.sjcc.tableData, this.sjcc.excelName)
    },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}

</style>